<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>axios取消请求</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>axios取消请求</h1>
<button>查询数据</button>
<button>取消查询</button>
<script>
  const oBtn = document.querySelectorAll('button')[0]
  const yBtn = document.querySelectorAll('button')[1]
  // 第一种方式取消
  // const CancelToken = axios.CancelToken;
  // let cancel = null
  //第二种方式取消
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();


  const myAxios = axios.create({
    baseURL: '/',
    timeout: 10000,
    headers: {}
  })
  oBtn.onclick = async function () {
    const value = prompt('请输入你想要查询的ID')
    try {
      const re = await myAxios.get('/breakConnect', {
        params: {
          userId: value
        },
        //第一种方式取消
        // cancelToken: new CancelToken(function executor(c) {
        //   // executor 函数接收一个 cancel 函数作为参数
        //   console.log(cancel)
        //   cancel = c;
        // })

        //第二种方式取消
        cancelToken: source.token
      })
    } catch (e) {
      console.log('出现错误', e)
    }
  }
  yBtn.onclick = function () {
    //第一种方式取消
    // cancel()
    // alert('链接取消成功!!')
    //第二种方式取消
    source.cancel('你手动取消了这个链接');
  }
  document.addEventListener('visibilitychange', () => {
    if(document.visibilityState === 'hidden') { // 离开当前tab标签
      console.log('离开当前tab标签')

      source.cancel('因为tab标签切换所以请求暂停');
    }else {

      console.log('回到当前tab标签')
    }
  })
</script>
</body>
</html>